<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow">
        <div>
          <a-form
            size="small"
            :model="pageData"
            layout="inline"
            v-if="permissionStore.hasPermisson('tjbzcs.cx')"
          >
            <a-form-item label="坯布编号" label-col-flex="80px">
              <a-input
                allow-clear
                :style="{ width: '200px' }"
                class="bacClass"
                placeholder=""
                v-model="pageData.dropDownData"
                @press-enter="huiche"
              />
            </a-form-item>
            <a-form-item label="坯布名称" label-col-flex="80px">
              <a-input
                allow-clear
                :style="{ width: '200px' }"
                class="bacClass"
                placeholder=""
                v-model="pageData.dropDownData1"
                @press-enter="huiche"
              />
            </a-form-item>
            <a-form-item label="状态" label-col-flex="80px">
              <a-select
                popup-container="html"
                class="bacClass"
                :style="{ width: '200px' }"
                v-model="pageData.state"
                allow-search
              >
                <a-option :value="0">未录入</a-option>
                <a-option :value="1">已录入</a-option>
                <a-option :value="2">全部</a-option>
              </a-select>
            </a-form-item>
          </a-form>
        </div>
        <div class="my-tool-bar" style="float: right">
          <Toolbar
            :items="pageData.btnList"
            @export="exports"
            @import="importHandler"
            @select="selectHandler"
            @excel="downloadHandler"
          >
          </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <a-spin
        :loading="pageData.pageLoading"
        tip="加载中"
        dot
        style="height: 100%; width: 100%; z-index: 999"
      >
        <AgGridVuesCopys
          :rowHeight="33"
          :headerHeight="33"
          :localeText="localeText1"
          :suppressDragLeaveHidesColumns="true"
          @grid-ready="gridReady"
          @columnResized="onColumnResized"
          @columnMoved="onColumnMoved"
          @columnVisible="onColumnVisible"
          rowSelection="multiple"
          style="height: 100%"
          :defaultColDef="defaultColDef"
          class="ag-theme-alpine"
          :rowData="table.dataList"
          :columnDefs="tc"
          :suppressCopyRowsToClipboard="true"
        >
        </AgGridVuesCopys>
      </a-spin>
      <!-- </a-tab-pane>
                </a-tabs> -->
    </template>
    <paginationCopys
      :total="total"
      show-total
      show-jumper
      show-page-size
      @change="PageSize"
      @page-size-change="change1"
      style="justify-content: center"
      :page-size="pagination.pageSize"
      :current="pagination.page"
      :page-size-options="pagingList1"
    />
    <a-drawer
      style="z-index: 999"
      ok-text="保存"
      cancel-text="关闭"
      :drawer-style="{ zIndex: 999 }"
      :mask-closable="false"
      :width="400"
      unmount-on-close
      popup-container=".arco-tabs-content"
      height="100%"
      :visible="pageData.showAdd"
      placement="bottom"
      @ok="sideOk"
      @cancel="pageData.showAdd = false"
      :ok-loading="pageData.pageLoading"
    >
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <div style="width: 1450px; overflow: auto" class="scrollbar">
        <el-scrollbar>
          <a-form
            ref="formRef"
            layout="horizontal"
            :model="dataForm"
            size="mini"
            :label-col-props="{ span: 11 }"
            :wrapper-col-props="{ span: 13 }"
          >
            <a-row :gutter="16">
              <a-col :span="8">
                <!-- <FuzzyFilterDropDownBox :config="config" @change="change" /> -->
                <a-form-item
                  label="坯布编号"
                  field="greyCloth"
                  :rules="[{ required: true, message: '坯布编号必填' }]"
                  :validate-trigger="['change', 'blur']"
                  label-col-flex="95px"
                >
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    v-model="dataForm.greyCloth"
                    allow-search
                    @change="changeRecord($event, 1)"
                    @focus="PbFocus"
                    allow-clear
                    @search="PbSearch"
                    disabled
                  >
                    <a-option v-for="item in pageData.greyClothList" :value="item.greyCode"
                      >{{ item.greyCode + ' —— ' + item.grayFabricName }}
                    </a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item
                  label="坯布名称"
                  field="nameCloth"
                  :rules="[{ required: true, message: '坯布名称必填' }]"
                  label-col-flex="95px"
                  :validate-trigger="['change', 'blur']"
                >
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    v-model="dataForm.nameCloth"
                    @focus="PbFocus1"
                    @search="PbSearch1"
                    allow-search
                    allow-clear
                    :filter-option="false"
                    @change="changeRecord($event, 2)"
                    disabled
                  >
                    <a-option v-for="item in pageData.greyClothList" :value="item['grayFabricName']"
                      >{{ item['grayFabricName'] }}
                    </a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item
                  label="针筒"
                  field="cylinderCoding"
                  :rules="[{ required: true, message: '针筒必填' }]"
                  :validate-trigger="['change', 'blur']"
                >
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    allow-clear
                    allow-search
                    v-model="dataForm.cylinderCoding"
                    @focus="machineTypeFocus1"
                    @search="machineTypeSearch1"
                  >
                    <a-option v-for="item in MachineTypeOptions1" :value="item['model']">
                      {{ item['model'] }}
                    </a-option>
                  </a-select>
                </a-form-item>
              </a-col>
                <a-col :span="4">
                <a-form-item
                  label="筒高"
                  field="barrelHeight"
                  :rules="[{ required: true, message: '筒高必填' }]"
                  :validate-trigger="['change', 'blur']"
                >
                <a-input-number
                    v-model="dataForm.barrelHeight"
                    placeholder=""
                    class="bacClass"
                    :min="0"
                    :precision="0"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="4">
                <a-form-item
                  label="机台类型"
                  field="machineType"
                  :rules="[{ required: true, message: '机台类型必填' }]"
                  :validate-trigger="['change', 'blur']"
                >
                  <a-select
                    popup-container="html"
                    allow-clear
                    allow-search
                    v-model="dataForm.machineType"
                    @focus="machineTypeFocus"
                    @search="machineTypeSearch"
                    disabled
                    style="border: 1px solid #a29f9f !important"
                  >
                    <a-option v-for="item in MachineTypeOptions" :value="item['typeName']">
                      {{ item['typeName'] }}
                    </a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <!-- <a-col :span="4">
                                <a-form-item label="机台号" field="machineID" :rules="[{ required: true, message: '机台号必填' }]"
                                    :validate-trigger="['change', 'blur']">
                                    <a-select popup-container="html"  class="bacClass" allow-clear allow-search v-model="dataForm.machineID"
                                        @focus="machineIDFocus" @search="machineIDSearch">
                                        <a-option v-for="item in machineIDOptions" :value="item['machineCode']">
                                            {{
                                                item['machineCode']
                                            }}
                                        </a-option>
                                    </a-select>
                                </a-form-item>
                            </a-col> -->
              <a-col :span="4">
                <a-form-item
                  label="洗机天数"
                  field="washDay"
                  :rules="[{ required: true, message: '洗机天数必填' }]"
                  :validate-trigger="['change', 'blur']"
                >
                  <a-input-number
                    v-model="dataForm.washDay"
                    placeholder=""
                    class="bacClass"
                    :min="0"
                    :max="100000"
                    :precision="0"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="布架宽度" field="clothRackWidth">
                  <a-input class="bacClass" v-model="dataForm.clothRackWidth" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="织针型号" field="needleModel">
                  <a-input v-model="dataForm.needleModel"  class="bacClass"
                  :style="{ width: '200px' }" popup-container="html" allow-clear></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="织针1段" field="needleOnePerod">
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    allow-clear
                    v-model="dataForm.needleOnePerod"
                  >
                    <a-option value=""></a-option>
                    <a-option value="✔">✔</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="织针2段" field="needleTwoPerod">
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    allow-clear
                    v-model="dataForm.needleTwoPerod"
                  >
                    <a-option value=""></a-option>
                    <a-option value="✔">✔</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="4">
                <a-form-item label="织针3段" field="needleThreePerod">
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    allow-clear
                    v-model="dataForm.needleThreePerod"
                  >
                    <a-option value=""></a-option>
                    <a-option value="✔">✔</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="织针4段" field="needleFourPerod">
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    allow-clear
                    v-model="dataForm.needleFourPerod"
                  >
                    <a-option value=""></a-option>
                    <a-option value="✔">✔</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="争食" field="dodge">
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    allow-clear
                    v-model="dataForm.dodge"
                  >
                    <a-option value=""></a-option>
                    <a-option value="✔">✔</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="分食" field="broken">
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    allow-clear
                    v-model="dataForm.broken"
                  >
                    <a-option value=""></a-option>
                    <a-option value="✔">✔</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="不分不争" field="allTrue">
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    allow-clear
                    v-model="dataForm.allTrue"
                  >
                    <a-option value=""></a-option>
                    <a-option value="✔">✔</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="布加张力1-16" field="clothTensionOS">
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    allow-clear
                    v-model="dataForm.clothTensionOS"
                  >
                    <a-option :value="1">1</a-option>
                    <a-option :value="2">2</a-option>
                    <a-option :value="3">3</a-option>
                    <a-option :value="4">4</a-option>
                    <a-option :value="5">5</a-option>
                    <a-option :value="6">6</a-option>
                    <a-option :value="7">7</a-option>
                    <a-option :value="8">8</a-option>
                    <a-option :value="9">9</a-option>
                    <a-option :value="10">10</a-option>
                    <a-option :value="11">11</a-option>
                    <a-option :value="12">12</a-option>
                    <a-option :value="13">13</a-option>
                    <a-option :value="14">14</a-option>
                    <a-option :value="15">15</a-option>
                    <a-option :value="16">16</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="4">
                <a-form-item label="布加张力A-D" field="clothTensionAD">
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    allow-clear
                    v-model="dataForm.clothTensionAD"
                  >
                    <a-option value="A">A</a-option>
                    <a-option value="B">B</a-option>
                    <a-option value="C">C</a-option>
                    <a-option value="D">D</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="底座垫片" field="baseGasket">
                  <a-input class="bacClass" v-model="dataForm.baseGasket" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="送纱盘-中盘" field="sandTableSurfacePlate">
                  <a-input class="bacClass" v-model="dataForm.sandTrayMiddlePlate" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="送纱盘-面盘" field="sandTableSurfacePlate">
                  <a-input class="bacClass" v-model="dataForm.sandTableSurfacePlate" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="送纱盘-底盘" field="sandDownSurfacePlate">
                  <a-input class="bacClass" v-model="dataForm.sandDownSurfacePlate" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="齿轮" field="gear">
                  <a-input class="bacClass" v-model="dataForm.gear" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="4">
                <a-form-item label="织针等级" field="needleGrade">
                  <a-input class="bacClass" v-model="dataForm.needleGrade" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="机速" field="engineSpeed">
                  <a-input-number
                    v-model="dataForm.engineSpeed"
                    placeholder=""
                    class="bacClass"
                    :min="0"
                    :max="100000"
                    :precision="2"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="油速" field="oilVelocity">
                  <a-input v-model="dataForm.oilVelocity" placeholder="" class="bacClass" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="实开路数" field="actualOpenWay">
                  <a-input v-model="dataForm.actualOpenWay" placeholder="" class="bacClass" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="针叶型号" field="needleModelNo">
                  <a-select
                    popup-container="html"
                    class="bacClass"
                    v-model="dataForm.needleModelNo"
                    @click="needleMpdelClick('')"
                    @search="needleMpdelClick"
                    allow-clear
                    allow-search
                  >
                    <a-option v-for="item in needleMpdelList" :value="item.specName">
                      {{ item.specName }}
                    </a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </el-scrollbar>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts">
  import { post, get } from '@/api/http'
  import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
  } from '@/hooks/table'
  import { localeText } from '@/api/aggridZw'
  import { ref, reactive, onMounted } from 'vue'
  import Toolbar from '@/components/Toolbar.vue'
  import { Form, Message, Modal, Pagination } from '@arco-design/web-vue'
  import { FormInstance } from '@arco-design/web-vue/es/form'
  import validate from '@/hooks/useValidate'
  import { baseURL } from '../../../api/axios.config'
  import axios from 'axios'
  import filedownload from 'js-file-download'
  import usePermission from '@/store/modules/permission'
  
  import { pagingList } from '@/api/paging'
  import FuzzyFilterDropDownBox from '@/components/FuzzyFilterDropDownBox/inde.vue'
  import { EXELTABLE } from '@/utils/exportEXCEL'
  import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'

  interface Cloth {
    merceryCode: string
  }

  interface ClothInfo {
    greyCloth: string | undefined
    nameCloth: string | undefined
    machineType: string | undefined
    machineID: string | undefined
    cylinderCoding: string | undefined
    clothRackWidth: string | undefined
    needleModel: string | undefined
    needleOnePerod: any
    needleTwoPerod: any
    needleThreePerod: any
    needleFourPerod: any
    dodge: any
    broken: any
    allTrue: any
    clothTensionAD: string | undefined
    clothTensionOS: any
    baseGasket: string | undefined
    sandTrayMiddlePlate: any
    sandTableSurfacePlate: any
    gear: string | undefined
    needleGrade: string | undefined
    deleteState: any
    createName: string | undefined
    createTime: string | undefined
    updateName: string | undefined
    updateTime: string | undefined
    engineSpeed: any
    oilVelocity: any
    sandDownSurfacePlate: any
    barrelHeight:any
  }

  export default {
    name: 'AdjustmentParameters',
    setup() {
      const config = ref<{}>({
        LabelWidth: '160px', //label宽度
        rulesRquired: true, //是否必填
        labelName: '坯布编号', //label名称
        url: 'product/pdGreyInformation/selectpdGreyInformation', //接口
      })
      const change = (data: any) => {
        console.log(data)
      }
      const headerShow = ref<boolean>(true)
      //查询
      const scrollbar = ref(true)

      function PageSize(val: any) {
        pagination.page = val
        doRefresh()
      }

      const total = ref(0)
      const page = ref(1)
      const size = ref(10)

      function change1(val: any) {
        pagination.pageSize = val
        doRefresh()
      }

      function doRefresh() {
        pageData.pageLoading = true
        updateGridState01()
        post({
          url: '/planSingle/machineStandard/getPage',
          data: {
            page: pagination.page,
            size: pagination.pageSize,
            deleteState: 0,
            greyCode: pageData.dropDownData,
            greyName: pageData.dropDownData1,
            state: pageData.state,
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              data.list.forEach(function (o: any) {
                if (o['needleOnePerod'] == 0 || o['needleOnePerod'] == '') {
                  o['needleOnePerod'] = ''
                } else if (o['needleOnePerod'] == 1) {
                  o['needleOnePerod'] = '✔'
                }
                if (o['needleTwoPerod'] == 0 || o['needleTwoPerod'] == '') {
                  o['needleTwoPerod'] = ''
                } else if (o['needleTwoPerod'] == 1) {
                  o['needleTwoPerod'] = '✔'
                }
                if (o['needleThreePerod'] == 0 || o['needleThreePerod'] == '') {
                  o['needleThreePerod'] = ''
                } else if (o['needleThreePerod'] == 1) {
                  o['needleThreePerod'] = '✔'
                }
                if (o['needleFourPerod'] == 0 || o['needleFourPerod'] == '') {
                  o['needleFourPerod'] = ''
                } else if (o['needleFourPerod'] == 1) {
                  o['needleFourPerod'] = '✔'
                }
                if (o['dodge'] == 0 || o['dodge'] == '') {
                  o['dodge'] = ''
                } else if (o['dodge'] == 1) {
                  o['dodge'] = '✔'
                }
                if (o['broken'] == 0 || o['broken'] == '') {
                  o['broken'] = ''
                } else if (o['broken'] == 1) {
                  o['broken'] = '✔'
                }
                if (o['allTrue'] == 0 || o['allTrue'] == '') {
                  o['allTrue'] = ''
                } else if (o['allTrue'] == 1) {
                  o['allTrue'] = '✔'
                }
              })
              table.handleSuccess(data.list)
              gridOption.value.setRowData(data.list)
              //pagination.setTotalSize(data.total);
              total.value = data.total
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }

      const { selectedRowKeys, onSelectionChange } = useRowSelection()
      const pagination = usePagination(doRefresh)
      const table = useTable()
      const rowKey = useRowKey('id')
      //检验表单是否含有中文的方法
      const hasChiese = validate.includeChinese
      const tableColumns = [
        {
          title: '坯布编号',
          key: 'greyCloth',
          dataIndex: 'greyCloth',
          width: 150,
        },
        {
          title: '坯布名称',
          key: 'nameCloth',
          dataIndex: 'nameCloth',
          width: 150,
        },
        {
          title: '洗机天数',
          key: 'washDay',
          dataIndex: 'washDay',
          width: 150,
        },
        {
          title: '设备机型',
          key: 'machineType',
          dataIndex: 'machineType',
          width: 150,
        },

        // {
        //   title: '机台号',
        //   key: 'machineID',
        //   dataIndex: 'machineID',
        //   width: 150,
        // },
        {
          title: '实开路数',
          key: 'actualOpenWay',
          dataIndex: 'actualOpenWay',
          width: 150,
        },
        {
          title: '针筒',
          key: 'cylinderCoding',
          dataIndex: 'cylinderCoding',
          width: 150,
        },
        {
          title: '筒高',
          key: 'barrelHeight',
          dataIndex: 'barrelHeight',
          width: 150,
        },
        {
          title: '针叶型号',
          key: 'needleModelNo',
          dataIndex: 'needleModelNo',
          width: 150,
        },
        {
          title: '布架宽度',
          key: 'clothRackWidth',
          dataIndex: 'clothRackWidth',
          width: 150,
        },
        {
          title: '织针型号',
          key: 'needleModel',
          dataIndex: 'needleModel',
          width: 150,
        },

        {
          title: '织针1段',
          key: 'needleOnePerod',
          dataIndex: 'needleOnePerod',
          width: 150,
        },
        {
          title: '织针2段',
          key: 'needleTwoPerod',
          dataIndex: 'needleTwoPerod',
          width: 150,
        },
        {
          title: '织针3段',
          key: 'needleThreePerod',
          dataIndex: 'needleThreePerod',
          width: 150,
        },
        {
          title: '织针4段',
          key: 'needleFourPerod',
          dataIndex: 'needleFourPerod',
          width: 150,
        },
        {
          title: '送线盘-中盘',
          key: 'sandTrayMiddlePlate',
          dataIndex: 'sandTrayMiddlePlate',
          width: 150,
        },
        {
          title: '送线盘-面盘',
          key: 'sandTableSurfacePlate',
          dataIndex: 'sandTableSurfacePlate',
          width: 150,
        },
        {
          title: '送线盘-底盘',
          key: 'sandDownSurfacePlate',
          dataIndex: 'sandDownSurfacePlate',
          width: 150,
        },
        {
          title: '底座垫片',
          key: 'baseGasket',
          dataIndex: 'baseGasket',
          width: 150,
        },
        {
          title: '争食',
          key: 'dodge',
          dataIndex: 'dodge',
          width: 150,
        },
        {
          title: '分食',
          key: 'broken',
          dataIndex: 'broken',
          width: 150,
        },
        {
          title: '不分不争',
          key: 'allTrue',
          dataIndex: 'allTrue',
          width: 150,
        },
        {
          title: '布加张力A-D',
          key: 'clothTensionAD',
          dataIndex: 'clothTensionAD',
          width: 150,
        },
        {
          title: '布加张力1-16',
          key: 'clothTensionOS',
          dataIndex: 'clothTensionOS',
          width: 150,
        },
        {
          title: '齿轮',
          key: 'gear',
          dataIndex: 'gear',
          width: 150,
        },
        {
          title: '机速',
          key: 'engineSpeed',
          dataIndex: 'engineSpeed',
          width: 150,
        },
        {
          title: '油速',
          key: 'oilVelocity',
          dataIndex: 'oilVelocity',
          width: 150,
        },
        {
          title: '织针等级',
          key: 'needleGrade',
          dataIndex: 'needleGrade',
          width: 150,
        },
        {
          title: '创建人',
          key: 'createName',
          dataIndex: 'createName',
          width: 150,
        },
        {
          title: '创建时间',
          key: 'createTime',
          dataIndex: 'createTime',
          width: 150,
        },
        {
          title: '最后修改人',
          key: 'updateName',
          dataIndex: 'updateName',
          width: 150,
        },
        {
          title: '最后修改时间',
          key: 'updateTime',
          dataIndex: 'updateTime',
          width: 150,
        },

        {
          title: '操作',
          key: 'id',
          dataIndex: 'id',
          slotName: 'action',
          width: 150,
          fixed: 'right',
        },
      ]

      const scroll = {
        x: 2000,
        y: 200,
      }

      let tc: any[] = tableColumns.map((o) => {
        let obj = {
          headerName: o.title,
          field: o.key,
          pinned: o['fixed'],
          tooltipField: o.key,
        }
        if (o.slotName === 'action') {
          obj['resizable'] = false
          obj['filter'] = false
          obj['sortable'] = false
          obj['lockPosition'] = 'right'
          obj['width'] = 220
          obj['cellRenderer'] = {
            template: `
            <a-space>
              <el-tag v-if="state == 0" type="dashed" class="gesture">未录入</el-tag>
              <el-tag v-if="state == 1" type="success" class="gesture">已录入</el-tag>
              <el-button style="color:#165dff;" v-if="isEdit" link @click="a">修改</el-button>
            </a-space>`,
            setup(props: any) {
              const isEdit = ref(pageData.isEdit)
              const a = () => {
                editHandler(props.params.data)
              }
              return {
                isEdit,
                a,
                state: props.params.data.state,
              }
            },
          }
        }

        return obj
      })

      let a = [
        {
          showRowGroup: 'hide_def',
          headerName: '',
          checkboxSelection: true,
          headerCheckboxSelection: true,
          pinned: 'left',
          width: 50,
          resizable: false,
          filter: false,
          sortable: false,
          minWidth: 50,
          maxWidth: 50,
          lockPosition: 'left',
        },
      ]
      tc = a.concat(tc)

      const tablediv = ref(null)
      const pageData = reactive<{
        clothList: Cloth[]
        showAdd: boolean
        sideTitle: string
        dropDownData: any
        pageLoading: boolean
        theight: number
        tablediv: any
        rHeight: number | undefined
        btnList: any[]
        isEdit: boolean
        codeList: any[]
        greyClothList: any[]
        dropDownData1: any
        nameList: any[]
        state: any
      }>({
        clothList: [],
        showAdd: false,
        sideTitle: '修改',
        dropDownData: '',
        pageLoading: false,
        theight: 0,
        tablediv: null,
        rHeight: 0,
        btnList: [],
        isEdit: false,
        codeList: [],
        greyClothList: [],
        dropDownData1: '',
        nameList: [],
        state: 2,
      })
      //下拉框得到焦点
      const focusSel = (ob: any) => {
        selCxAll(ob)
      }
      //下拉数据
      const options = ref<any>(pageData.codeList)
      const loading = ref(false)
      const handleSearch = (value: any) => {
        if (value) {
          let ob = { greyCloth: value }
          loading.value = true
          selCxAll(ob)
          options.value = pageData.codeList
          loading.value = false
        } else {
          options.value = []
        }
      }
      //下拉数据
      const options1 = ref<any>(pageData.codeList)
      const loading1 = ref(false)
      const handleSearch1 = (value: any) => {
        if (value) {
          let ob = { nameCloth: value }
          loading1.value = true
          selCxAll(value)
          options1.value = pageData.codeList
          loading1.value = false
        } else {
          options.value = []
        }
      }

      //下拉框查询
      function selCxAll(val: any) {
        post({
          url: '/planSingle/machineStandard/getFieldValue',
          data: val,
        }).then(({ data, code }: any) => {
          if (code === 200) {
            pageData.codeList = data
          } else {
            Message.error({
              content: '查询失败！',
              duration: 5000,
            })
          }
        })
      }

      onMounted(() => {
        doRefresh()
        pageData.rHeight = document.getElementsByClassName('arco-tabs-content')[0]?.clientHeight

        //弹出层的高
        if (pageData.rHeight !== undefined) {
          pageData.rHeight = pageData.rHeight - 100
        }
        window.addEventListener('resize', () => {
          pageData.rHeight = document.getElementsByClassName('arco-tabs-content')[0]?.clientHeight
          //弹出层的高
          if (pageData.rHeight !== undefined) {
            pageData.rHeight = pageData.rHeight - 100
          }
        })
      })
      let cxbl = ''
      //查询
      const selectHandler = () => {
        pagination.page = 1
        cxbl = pageData.dropDownData
        doRefresh()
      }
      const queryData = reactive({
        clothType: '',
      })
      const addHandler = () => {
        for (var key in dataForm) {
          if (key === 'id') {
            dataForm[key] = null
          } else {
            dataForm[key] = ''
          }
        }
        pageData.showAdd = true
        pageData.sideTitle = '新增调机标准参数'
      }
      const dataForm = reactive<any>({
        greyCloth: '',
        nameCloth: '',
        machineType: '',
        machineID: '',
        cylinderCoding: '',
        clothRackWidth: '',
        needleModel: '',
        needleOnePerod: 0,
        needleTwoPerod: 0,
        needleThreePerod: 0,
        needleFourPerod: 0,
        dodge: 0,
        broken: 0,
        allTrue: 0,
        clothTensionAD: '',
        clothTensionOS: 0,
        baseGasket: '',
        sandTrayMiddlePlate: 0,
        sandTableSurfacePlate: 0,
        gear: '',
        needleGrade: '',
        deleteState: 0,
        createName: '',
        createTime: '',
        updateName: '',
        updateTime: '',
        engineSpeed: 0,
        oilVelocity: 0,
        sandDownSurfacePlate: 0,
        washDay: '', //洗机天数
        barrelHeight:null,
      })

      // 表格准备事件
      const gridOption = ref()
      const colState = ref()
      const gridReady = (params: any) => {
        gridOption.value = params.api
        colState.value = params.columnApi
      }

      const formRef = ref<FormInstance>()
      const sideOk = () => {
        formRef.value?.validate().then((err) => {
          if (!err) {
            for (var key in dataForm) {
              if (
                key == 'needleOnePerod' ||
                key == 'needleTwoPerod' ||
                key == 'needleThreePerod' ||
                key == 'needleFourPerod' ||
                key == 'dodge' ||
                key == 'broken' ||
                key == 'allTrue'
              ) {
                if (dataForm[key] == '') {
                  dataForm[key] = '0'
                } else if (dataForm[key] == '✔') {
                  dataForm[key] = '1'
                }
              }
            }

            pageData.pageLoading = true
            post({
              url: 'planSingle/machineStandard/updateStandard',
              data: dataForm,
            })
              .then((res: any) => {
                if (res.code === 200) {
                  formRef.value?.resetFields()
                  pageData.showAdd = false

                  Message.success({
                    content: '修改成功',
                    duration: 5000,
                  })
                  doRefresh()
                } else {
                  Message.error({
                    content: res.message,
                    duration: 5000,
                  })
                }
              })
              .finally(() => {
                doRefresh()
                pageData.pageLoading = false
              })
          }
        })
      }
      const deleteHandler = () => {
        if (gridOption.value.getSelectedRows() === 0) {
          Message.error('请先勾选')
          return
        }
        Modal.confirm({
          title: '系统提示',
          content: '确认删除选中的数据?',
          onOk() {
            pageData.pageLoading = true
            post({
              url: 'planSingle/machineStandard/delete',
              //data: selectedRowKeys.value,
              data: gridOption.value.getSelectedRows().map((o: any) => {
                return o.id
              }),
            })
              .then(({ code, message }: any) => {
                if (code === 200) {
                  Message.success({
                    content: '删除成功',
                    duration: 5000,
                  })

                  pagination.page = 1
                  doRefresh()
                } else {
                  Message.error({
                    content: message,
                    duration: 5000,
                  })
                }
              })
              .finally(() => {
                pageData.pageLoading = false
              })
          },
        })
      }
      const editHandler = (record: ClothInfo) => {
        for (var key in record) {
          dataForm[key] = record[key]
        }
        pageData.sideTitle = '修改'
        pageData.showAdd = true
      }
      //判断是否填写了中文
      const isChiese = (value: string, cb: Function) => {
        return new Promise<void>((resolve) => {
          if (window.encodeURI(value).indexOf('%') !== -1) {
            cb('填写的值只能是英文数字组合或英文，数字！')
          }
          resolve()
        })
      }
      //input离开焦点 将小写转大写
      const inputBlur = () => {
        // dataForm.merceryCode = dataForm.merceryCode.toUpperCase();
      }
      //导出
      const exports = () => {
        if (gridOption.value.getSelectedRows().length === 0) {
          Message.error('请先勾选')
          return
        } else {
          EXELTABLE(tc, gridOption.value.getSelectedRows(), '调机标准参数')
        }
      }

      //模板下载
      const downloadHandler = () => {
        axios
          .get(baseURL + '/planSingle/machineStandard/uploadModel', {
            responseType: 'blob',
            headers: {
              token: sessionStorage.getItem('USER-TOKEN-KEY'),
            },
          })
          .then((res) => {
            if (res.status === 200) {
              filedownload(res.data, '调机标准参数.xlsx')
            }
          })
      }
      //导入
      const importHandler = () => {
        const inputEle: HTMLInputElement = document.createElement('input')
        inputEle.type = 'file'
        inputEle.id = 'fileUploadExcel'
        inputEle.accept =
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
        inputEle.addEventListener('change', (e) => {
          const formData = new FormData()
          if (inputEle.files !== null) {
            formData.append('file', inputEle.files[0] || '')
          } else {
            Message.warning('未选择文件！')
            return
          }
          pageData.pageLoading = true
          axios
            .post(baseURL + '/planSingle/machineStandard/importModelData', formData, {
              headers: {
                'Content-Type': 'multipart/form-data',
                token: sessionStorage.getItem('USER-TOKEN-KEY'),
              },
            })
            .then((result) => {
              if (result.data['code'] === 200) {
                Message.success('导入成功')
              } else {
                Message.error(result.data.message)
              }
            })
            .finally(() => {
              pageData.pageLoading = false
              doRefresh()
            })
        })
        inputEle.click()
      }
      //下拉框得到焦点
      const PbFocus = () => {
        getPbList({ greyCode: '', auditState: 1 })
      }
      //下拉框得到焦点
      const PbFocus1 = () => {
        getPbList({ grayFabricName: '', auditState: 1 })
      }
      //下拉数据
      const PbOptions = ref<any>(pageData.greyClothList)
      const PbLoading = ref(false)
      const PbSearch = (value: any) => {
        if (value) {
          PbLoading.value = true
          getPbList({ greyCode: value })
          PbOptions.value = pageData.greyClothList
          PbLoading.value = false
        } else {
          PbOptions.value = []
        }
      }
      const PbSearch1 = (value: any) => {
        if (value) {
          PbLoading.value = true
          getPbList({ grayFabricName: value })
          PbOptions.value = pageData.greyClothList
          PbLoading.value = false
        } else {
          PbOptions.value = []
        }
      }
      //查询所有的坯布
      const getPbList = (val: any) => {
        post({
          url: 'product/pdGreyInformation/getFieldValue',
          data: val,
        }).then(({ code, message, data }: any) => {
          if (code === 200) {
            pageData.greyClothList = data
          } else {
            Message.error({
              content: message,
              duration: 5000,
            })
          }
        })
      }

      const changeRecord = (value: any, i: any) => {
        if (dataForm.greyCloth == '') {
          dataForm.nameCloth = ''
          dataForm.cylinderCoding = ''
          dataForm.machineType = ''
        }
        if (i === 1) {
          let tempList = table.dataList.filter((o: any) => {
            return o['greyCode'] == value
          })
          if (tempList.length > 0) {
            Message.warning({
              content: '请选择不同的坯布信息!',
              duration: 2000,
            })
            dataForm.nameCloth = ''
            dataForm.greyCloth = ''
            dataForm.cylinderCoding = ''
            dataForm.machineType = ''
            return
          }
          let list = pageData.greyClothList.filter((o: any) => {
            return o['greyCode'] == value
          })
          dataForm.nameCloth = list[0]['grayFabricName']
          dataForm.cylinderCoding =
            list[0]['dimensionFigure'] +
            '*' +
            list[0]['needleCount'] +
            '*' +
            list[0]['sumNeedleCount']
          dataForm.machineType = list[0]['machineType']
          dataForm.actualOpenWay = Number(list[0]['sumNeedleCount'])
        } else {
          let tempList = table.dataList.filter((o: any) => {
            return o['grayFabricName'] == value
          })
          if (tempList.length > 0) {
            Message.warning({
              content: '请选择不同的坯布信息!',
              duration: 2000,
            })
            dataForm.nameCloth = ''
            dataForm.greyCloth = ''
            dataForm.cylinderCoding = ''
            dataForm.machineType = ''
            return
          }
          let list = pageData.greyClothList.filter((o: any) => {
            return o['grayFabricName'] == value
          })
          console.log(list)

          dataForm.greyCloth = list[0]['greyCode']
          dataForm.cylinderCoding =
            list[0]['dimensionFigure'] +
            '*' +
            list[0]['needleCount'] +
            '*' +
            list[0]['sumNeedleCount']
          dataForm.machineType = list[0]['machineType']
          dataForm.actualOpenWay = Number(list[0]['sumNeedleCount'])
        }
      }

      //下拉框得到焦点
      const machineTypeFocus = () => {
        getMachineTypeList('')
      }
      const machineTypeFocus1 = () => {
        getMachineTypeList1('')
      }
      //下拉数据
      const MachineTypeOptions = ref<any[]>([])
      const MachineTypeOptions1 = ref<any[]>([])
      const MachineTypeLoading = ref(false)
      const machineTypeSearch = (value: any) => {
        if (value) {
          MachineTypeLoading.value = true
          getMachineTypeList(value)
          MachineTypeLoading.value = false
        } else {
          MachineTypeOptions.value = []
        }
      }
      const MachineTypeLoading1 = ref(false)
      const machineTypeSearch1 = (value: any) => {
        if (value) {
          MachineTypeLoading1.value = true
          getMachineTypeList1(value)
          MachineTypeLoading1.value = false
        } else {
          MachineTypeOptions1.value = []
        }
      }
      //查询机台类型
      const getMachineTypeList = (val: any) => {
        machineIDOptions.value = []
        dataForm.machineID = ''
        post({
          url: 'planSingle/machineType/getFieldValue',
          data: {
            typeName: val,
          },
        }).then((res: any) => {
          if (res.code == 200) {
            MachineTypeOptions.value = res.data
          }
        })
      }
      const getMachineTypeList1 = (val: any) => {
        post({
          url: 'product/workdrumEquipment/getFieldValue',
          data: {
            model: val,
          },
        }).then((res: any) => {
          if (res.code == 200) {
            MachineTypeOptions1.value = res.data
          }
        })
      }

      //下拉框得到焦点
      const machineIDFocus = () => {
        getMachineIDList('')
      }
      //下拉数据
      const machineIDOptions = ref<any[]>([])
      const machineIDLoading = ref(false)
      const machineIDSearch = (value: any) => {
        if (value) {
          machineIDLoading.value = true
          getMachineIDList(value)
          machineIDLoading.value = false
        } else {
          machineIDOptions.value = []
        }
      }
      //查询机台号
      const getMachineIDList = (val: any) => {
        if (dataForm.machineType == '') {
          Message.warning({
            content: '请先选择机台类型',
            duration: 2000,
          })
          return
        }
        post({
          url: 'planSingle/machine/getMachinePage',
          data: {
            machineTypeName: dataForm.machineType,
            machineCode: val,
            page: 1,
            size: 30,
          },
        }).then((res: any) => {
          if (res.code == 200) {
            machineIDOptions.value = res.data.list
          }
        })
      }

      //设置权限
      // ['查询', '新增', '删除', '导出', '导入']
      const permissionStore = usePermission()

      if (permissionStore.hasPermisson('tjbzcs.cx')) {
        pageData.btnList.push('查询')
      }
      if (permissionStore.hasPermisson('tjbzcs.dc')) {
        pageData.btnList.push('导出')
      }
      if (permissionStore.hasPermisson('tjbzcs.drExcel')) {
        pageData.btnList.push('导入')
      }
      if (permissionStore.hasPermisson('tjbzcs.mbxz')) {
        pageData.btnList.push('模板下载')
      }
      if (permissionStore.hasPermisson('tjbzcs.xg')) {
        pageData.isEdit = true
      }
      const handleChange = (_data: any) => {
        table.handleSuccess(_data)
      }
      const defaultColDef = {
        sortable: true,
        resizable: true,
        filter: true,
        //flex: 1
      }
      const localeText1: any = ref(localeText)
      const huiche = () => {
        doRefresh()
      }
      //下拉框得到焦点  织针型号
      const needfocusSel = () => {
        needselCxAll({ specName: '' })
      }
      //下拉数据  织针型号
      const needoptions = ref<any>(pageData.nameList)
      const needloading = ref(false)
      const needhandleSearch = (value: any) => {
        if (value) {
          const ob = { specName: value }
          loading.value = true
          window.setTimeout(() => {
            needselCxAll(ob)
            needoptions.value = pageData.nameList
            needloading.value = false
          }, 200)
        } else {
          options.value = []
        }
      }

      //下拉框查询  织针型号
      function needselCxAll(val: any) {
        post({
          url: 'purchase/MaterialSpec/getFieldValue',
          data: val,
        }).then(({ data, code }: any) => {
          if (code === 200) {
            pageData.nameList = data
          } else {
            Message.error({
              content: '查询失败！',
              duration: 5000,
            })
          }
        })
      }

      const pagingList1: any = ref(pagingList)
      const { saveGridState: saveGridState01, updateGridState: updateGridState01 } =
        saveOrUpdateGridState01('AdjustmentParameters-1', gridOption, colState, tc)
      const onColumnMoved = () => {
        saveGridState01()
      }
      const onColumnResized = () => {
        saveGridState01()
      }
      const onColumnVisible = () => {
        saveGridState01()
      }
      const needleMpdelList = ref([])
      const needleMpdelClick = (val: any) => {
        post({
          url: '/purchase/MaterialInfo/getFieldValueByZhenYe',
          data: {
            specName: val,
          },
        }).then(({ data }) => {
          needleMpdelList.value = data
        })
      }
      return {
        needleMpdelList,
        needleMpdelClick,
        saveOrUpdateGridState01,
        saveGridState01,
        updateGridState01,
        onColumnMoved,
        onColumnResized,
        onColumnVisible,
        colState,
        needselCxAll,
        needhandleSearch,
        needfocusSel,
        needoptions,
        needloading,
        pagingList1,
        huiche,
        localeText1,
        scroll,
        scrollbar,
        tablediv,
        downloadHandler,
        importHandler,
        hasChiese,
        deleteHandler,
        sideOk,
        formRef,
        dataForm,
        addHandler,
        selectedRowKeys,
        pagination,
        tableColumns,
        table,
        rowKey,
        pageData,
        queryData,
        editHandler,
        selectHandler,
        options,
        loading,
        handleSearch,
        options1,
        loading1,
        handleSearch1,
        inputBlur,
        isChiese,
        exports,
        focusSel,
        headerShow,
        changeRecord,
        getPbList,
        PageSize,
        change1,
        handleChange,
        PbFocus,
        PbSearch,
        PbFocus1,
        PbSearch1,
        machineTypeFocus,
        machineTypeFocus1,
        machineTypeSearch,
        MachineTypeOptions,
        MachineTypeOptions1,
        machineIDOptions,
        machineTypeSearch1,
        machineIDFocus,
        machineIDSearch,
        defaultColDef,
        tc,
        gridOption,
        permissionStore,
        gridReady,
        total,
        config,
        change,
      }
    },
    components: { Toolbar, FuzzyFilterDropDownBox },
  }
</script>
<style scoped>
  .arco-input-wrapper.arco-input-disabled {
    border: 1px solid #a29f9f !important;
  }

  .form {
    width: 100vw !important;
  }
</style>
